<template>
  <div class="qiye">
    <div class="qi-one">
      <div class="qi-one-q"></div>
      <div class="qi-one-qq">
        <img src="../../assets/images/search.png" alt="" class="qi-one-ww" />
        <input
          type="text"
          placeholder="请输入企业名称"
          class="qi-one-e"
          v-model="searchPa"
        />
        <div class="qi-two" @click="goList()">搜索</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      searchPa: "",
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    goList() {
      if (this.searchPa === "") {
        this.$toast("请输入文本内容");
      } else {
        // this.$router.push(
        //     {
        //         path:'/sousuojieguo1',
        //         query:{
        //             name:this.searchPa
        //         }
        //     }
        // )
        window.open("https://www.baidu.com");
      }
    },

    // goList() {
    //     if (this.searchPa === '') {
    //         this.$toast('请输入搜索内容');
    //         // Toast('提示内容');
    //     } else {
    //         this.$router.push({
    //             // 路径
    //             path: '/sousuojieguo',
    //             // 携带的参数,路由传参,http://localhost:8080/#/sousuojieguo?name=123
    //             query: {
    //                 name: this.searchPa,
    //                 // name1: this.searchPa,

    //             }
    //         })
    //     }
    // }
  },
};
</script>

<style scoped lang="scss">
.qiye {
  .qi-one {
    background: url("../../assets/images/toutu.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 245px;
    overflow: hidden;
    position: relative;

    .qi-one-q {
      background: url("../../assets/images/logo.png");
      width: 71px;
      height: 45px;
      margin-left: 10px;
      margin-top: 47px;
    }

    .qi-one-qq {
      height: 35px;
      background: #ffffff;
      opacity: 0.9;
      border-radius: 6px;
      position: absolute;
      bottom: 24px;
      right: 13px;
      left: 13px;
      display: flex;
      align-items: center;

      .qi-one-ww {
        height: 15px;
        width: 15px;
        margin-left: 14px;
      }

      .qi-one-e {
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #212121;
        margin-left: 10px;
      }

      .qi-two {
        margin-left: auto;
        margin-right: 5px;
      }
    }
  }
}
</style>
